﻿<%@ Page Title="" Language="VB" MasterPageFile="~/App/Master/App.master" AutoEventWireup="false" CodeFile="Billing.aspx.vb" Inherits="App_Billing" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CphHead" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CphMainContent" runat="Server">



    <!-- gestione piani -->
    <div class="row-fluid">
        <!-- piani -->
        <asp:Panel runat="server" ID="PblPlans" Visible="true" CssClass="billing-account">

            <!-- contenuti -->
            <div class="well-billing-account-basic">
                <div class="account-basic-text">
                    <div class="billing-account-basic-title">Basic</div>
                    <div class="billing-account-basic-subtitle">€ 9 per user/month</div>
                    <div class="billing-account-basic-pretext">Thought for power users, freelances or startups</div>
                    <div class="billing-account-basic-body">
                        <div>Manage 1 Twitter account</div>
                        <div>Analyze 1.000 followers</div>
                        <div>10 hashtag queries</div>
                        <div>1 hashtag listening</div>
                    </div>
                    <div class="billing-bottone">
                        <asp:LinkButton runat="server" ID="BtnSelectPlan1" CommandArgument="1" CssClass="start-trial-basic">Start you FREE trial now</asp:LinkButton>
                    </div>
                </div>
                <div class="expandable-image-basic"></div>
            </div>

            <div class="well-billing-account-medium">
                <div class="account-medium-text">
                    <div class="billing-account-medium-title">Medium</div>
                    <div class="billing-account-medium-subtitle">€ 39 per user/month</div>
                    <div class="billing-account-medium-pretext">Starting plan for Web Agencies or small companies</div>
                    <div class="billing-account-medium-body">
                        Manage up to 6 Twitter accounts
										Analyze 9.000 followers
  										+9.000 followers without analysis
										45 hashtag queries
										3 hashtag listening
                    </div>
                    <div class="billing-bottone">
                        <asp:LinkButton runat="server" ID="BtnSelectPlan2" CommandArgument="2" CssClass="start-trial">Start you FREE trial now</asp:LinkButton>

                    </div>
                </div>
                <div class="expandable-image-medium"></div>
            </div>

            <div class="well-billing-account-deluxe">
                <div class="account-deluxe-text">
                    <div class="billing-account-deluxe-title">Deluxe</div>
                    <div class="billing-account-deluxe-subtitle">€ 59 per user/month</div>
                    <div class="billing-account-deluxe-pretext">Ideal for Web Agencies or SME</div>
                    <div class="billing-account-deluxe-body">
                        Manage up to 10 Twitter accounts
												 Analyze 30.000 followers
  												 +30.000 followers without analysis
												 105 hashtag queries
													5 hashtag listening
                    </div>
                    <div class="billing-bottone">
                        <asp:LinkButton runat="server" ID="BtnSelectPlan3" CommandArgument="3" CssClass="start-plan">Start the plan</asp:LinkButton>
                    </div>
                </div>
                <div class="expandable-image-deluxe"></div>
            </div>

            <div class="well-billing-account-premium">
                <div class="account-premium-text">
                    <div class="billing-account-premium-title">Premium</div>
                    <div class="billing-account-premium-subtitle">€ 99 per user/month</div>
                    <div class="billing-account-premium-pretext">A powerfull plan for everyone who needs full control</div>
                    <div class="billing-account-premium-body">
                        Manage up to 20 Twitter accounts
												  Analyze 100.000 followers
  												  +100.000 followers without analysis
												  250 hashtag queries
												  10 hashtag listening
                    </div>
                    <div class="billing-bottone">
                        <asp:LinkButton runat="server" ID="BtnSelectPlan4" CommandArgument="4" CssClass="start-premium">Start the plan</asp:LinkButton>
                    </div>
                </div>
                <div class="expandable-image-premium"></div>
            </div>

        </asp:Panel>

        <!-- billing -->
        <asp:Panel runat="server" ID="PblActivateBilling" Visible="false" CssClass="billing-account">

            <asp:Panel runat="server" ID="PnlActivatePlan1" Visible="false" CssClass="well-billing-account-activate">
                <div>
                    <div class="billing-account-basic-header-title">Activating the plan:</div>
                    <div class="billing-account-basic-activate-title">Basic</div>
                    <div class="billing-account-basic-subtitle">€ 9 per user/month</div>
                    <div class="billing-account-basic-pretext">Thought for power users, freelances or startups</div>
                    <div class="billing-account-basic-activate-body">
                        <div>Manage 1 Twitter account</div>
                        <div>Analyze 1.000 followers</div>
                        <div>10 hashtag queries</div>
                        <div>1 hashtag listening</div>
                    </div>

                </div>
                <div class="expandable-image"></div>
            </asp:Panel>

            <asp:Panel runat="server" ID="PnlActivatePlan2" Visible="false" Cssclass="well-billing-account-activate-medium">
                <div>
                    <div class="billing-account-basic-header-title">Activating the plan:</div>
                    <div class="billing-account-basic-activate-title">Medium</div>
                    <div class="billing-account-basic-subtitle">€ 39 per user/month</div>
                    <div class="billing-account-basic-pretext">Starting plan for Web Agencies or small companies</div>
                    <div class="billing-account-basic-activate-body">
                        Manage up to 6 Twitter accounts
										Analyze 9.000 followers
  										+9.000 followers without analysis
										45 hashtag queries
										3 hashtag listening
                    </div>

                </div>
                <div class="expandable-image-act-medium"></div>
            </asp:Panel>

            <asp:Panel runat="server" ID="PnlActivatePlan3" Visible="false" Cssclass="well-billing-account-activate-deluxe">
                <div>
                    <div class="billing-account-basic-header-title">Activating the plan:</div>
                    <div class="billing-account-basic-activate-title">Deluxe</div>
                    <div class="billing-account-basic-subtitle">€ 59 per user/month</div>
                    <div class="billing-account-basic-pretext">Ideal for Web Agencies or SME</div>
                    <div class="billing-account-basic-activate-body">
                        Manage up to 10 Twitter accounts
												 Analyze 30.000 followers
  												 +30.000 followers without analysis
												 105 hashtag queries
													5 hashtag listening
                    </div>

                </div>
                <div class="expandable-image-act-deluxe"></div>
            </asp:Panel>

            <asp:Panel runat="server" ID="PnlActivatePlan4" Visible="false" Cssclass="well-billing-account-activate-premium">
                <div>
                    <div class="billing-account-premium-header-title">Activating the plan:</div>
                    <div class="billing-account-premium-activate-title">Premium</div>
                    <div class="billing-account-premium-subtitle">€ 99 per user/month</div>
                    <div class="billing-account-premium-pretext">A powerfull plan for everyone who needs full control</div>
                    <div class="billing-account-premium-activate-body">
                        Manage up to 20 Twitter accounts
												  Analyze 100.000 followers
  												  +100.000 followers without analysis
												  250 hashtag queries
												  10 hashtag listening
                    </div>

                </div>
                <div class="expandable-image-act-premium"></div>
           </asp:Panel>

            <div class="well-billing-payment">
                <div class="well-billing-payment-title">
                    Billing info

                    <asp:Label runat="server" ID="LblPrice"> </asp:Label> 
                </div>
                <div class="well-billing-payment-title-left">
                    <div>
                        <asp:TextBox runat="server" id="TxtCompany" placeholder="Company Name" />
                    </div>
                    <div>
                        <asp:TextBox runat="server" id="TxtAddress" placeholder="Address" />
                    </div>
                    <div>
                        <asp:TextBox runat="server" id="TxtCity" placeholder="City" />
                    </div>
                    <div>
                        <asp:TextBox runat="server" id="TxtVat" placeholder="VAT number" />
                    </div>
                    <div class="well-billing-payment-input-monthly">
                        <%--<input id="c1" type="radio" name="c1">--%>
                        <asp:RadioButton runat="server" ID ="RdbPayMonth" GroupName="PayType" Checked="true" AutoPostBack ="true"  />
                        <label for="RdbPayMonth">
                            <span></span>
                            monthly subscription
                        </label>
                    </div>
                    <div class="well-billing-payment-input-annual">
                        <asp:RadioButton runat="server" ID ="RdbPayYear" GroupName="PayType" AutoPostBack ="true"  />

                        <%--<input id="c2" type="radio" name="c1">--%>
                        <label for="RdbPayYear">
                            <span></span>
                            annual plan (SAVE 10%!)
                        </label>
                    </div>
<%--                    <div class="well-billing-payment-input-msg">
                        Nothing will be charged until: 23rd March 2015
                    </div>--%>
                </div>
                <div class="well-billing-payment-title-right">
                    <div class="well-billing-payment-title-right-msg">We will use your name if empty</div>
                    <div>
                        <input id="zip" type="text" placeholder="ZIP Code" name="email">
                    </div>
                    <div>
                        <input id="country" type="text" placeholder="Country" name="email">
                    </div>
                    <div class="well-billing-payment-title-right-paypal">
                        <a href="#">Click here to connect with</a>
                    </div>
                    <div class="img-paypal">
                        <img src="http://labs.glouk.it/Style/App/img/paypal.png">
                    </div>
                    <div class="activate-the-plan-button">
                        <asp:LinkButton runat="server" ID="BtnActivePlan" cssclass="activate-plan" >Activate the plan</asp:LinkButton>
                    </div>
                </div>

            </div>

        </asp:Panel>

    </div>
    <!-- box 2 -->
    <div class="row-fluid">
        <div class="billing-signing-bar">
            <b>Save 10%</b> signing up for an annual plan
        </div>
    </div>
    <!-- fine box 2 -->



    <!-- box 3 -->
    <div class="row-fluid">
        <div class="well-billing-current">
            <!-- contenuto -->
            <div class="billing-current-info">
                <div><b>current billing info:</b></div>
                <div>Nome</div>
                <div>Indirizzo</div>
                <div>Nazioen</div>
                <div>VAT NUMBER</div>
                <div><a class="billing-current-info-change" href="#">Change</a></div>

            </div>
            <div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
                <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                    <div class="billing-invoice-title">Download invoices</div>
                    <div class="billing-invoice-subscription">Subscription active to <asp:Label runat="server" ID="LblExpire" /> </div>
                </h3>
                <div class="billing-invoice ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="ui-accordion-accordion-panel-0" aria-labelledby="ui-accordion-accordion-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block; height: 256px;">

                    <div>
                        <div class="billing-invoice-head">
                            <div class="billing-invoice-head-date">date</div>
                            <div class="billing-invoice-head-number">invoice number</div>
                            <div class="billing-invoice-head-status">satus</div>
                        </div>
                        <div class="billing-invoice-line">
                            <div class="billing-invoice-line-date">21/12/2013</div>
                            <div class="billing-invoice-line-number"><a href="#">#123-131</a></div>
                            <div class="billing-invoice-line-status">payed</div>
                        </div>
                        <div class="billing-invoice-line">
                            <div class="billing-invoice-line-date">21/01/2014</div>
                            <div class="billing-invoice-line-number"><a href="#">#123-132</a></div>
                            <div class="billing-invoice-line-status">payed</div>
                        </div>
                        <div class="billing-invoice-line">
                            <div class="billing-invoice-line-date">21/02/2014</div>
                            <div class="billing-invoice-line-number"><a href="#">#123-133</a></div>
                            <div class="billing-invoice-line-status">payed</div>
                        </div>
                        <div class="billing-invoice-line">
                            <div class="billing-invoice-line-date">21/03/2014</div>
                            <div class="billing-invoice-line-number"><a href="#">#123-134</a></div>
                            <div class="billing-invoice-line-status">payed</div>
                        </div>
                        <div class="billing-invoice-line">
                            <div class="billing-invoice-line-date">21/03/2014</div>
                            <div class="billing-invoice-line-number"><a href="#">#123-135</a></div>
                            <div class="billing-invoice-line-status">payed</div>
                        </div>
                        <div class="billing-invoice-line">
                            <div class="billing-invoice-line-date">21/03/2014</div>
                            <div class="billing-invoice-line-number"><a href="#">#123-136</a></div>
                            <div class="billing-invoice-line-status">payed</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- fine contenuto -->
        </div>
    </div>
    <!-- fine box 3 -->
    <!-- box 4 -->
    <div class="row-fluid">
        <div class="your-accounts">
            <!-- contenuto -->
            <div class="well-billing-enterpirse">
                <div class="billing-enterpirse-left">
                    <div class="billing-enterpirse-left-text">Enterprise &amp; large agencies</div>
                    <a class="contact-enterprise" href="#">Contact the Enterprise Team</a>
                </div>
                <div class="billing-enterpirse-right">
                    Curious about how our platform can fit the unique needs of 
			your business? Contact us today to set up some time with 
			one of our product specialists.
                </div>
            </div>
            <!-- fine contenuto -->
        </div>
    </div>
    <!-- fine box 4 -->





</asp:Content>

